<!--
 * @Description: 
 * @Author:  huangshuai
 * @Date: 2023-11-07 08:59:49
 * @LastEditTime: 2023-11-08 14:08:25
 * @LastEditors: huangshuai 
-->
<template>
  <div v-loading="loading">
    <el-card class="post_card">
      <el-form :model="form" label-width="80px" style="display: flex">
        <el-form-item label="标题">
          <el-input
            v-model="form.titleName"
            @keyup.enter.native="handleQuery"
            @clear="handleQuery"
            clearable
            placeholder="输入标题进行搜索"
          />
        </el-form-item>
        <el-form-item label="分类">
          <el-select v-model="form.categoryName" placeholder="请选择分类">
            <el-option label="全部" value="" />
            <el-option label="宠物" value="0" />
            <el-option label="生活" value="1" />
            <el-option label="其他" value="2" />
          </el-select>
        </el-form-item>
        <div style="width: 20px"></div>
        <el-button type="primary" @click="handleQuery">搜索</el-button>
        <el-button type="primary" @click="handleAddPost">发表帖子</el-button>
      </el-form>
    </el-card>
    <div
      class="scoll_data"
      v-infinite-scroll="getPostData"
      :infinite-scroll-immediate="false"
    >
      <el-row>
        <el-col :span="6" v-for="item in postList" style="padding: 10px">
          <el-card
            :body-style="{ padding: '0px' }"
            @click="handleCheckPost(item.id)"
            style="border-radius: 10px"
          >
            <el-carousel
              trigger="click"
              height="150px"
              indicator-position="none"
              :autoplay="false"
            >
              <el-carousel-item
                v-for="subItem in item.pictureList"
                :key="item"
                style="border-radius: 10px"
              >
                <img :src="subItem" class="image" style="width: 100%" />
              </el-carousel-item>
            </el-carousel>

            <div class="post-middle">
              <div v-if="item.titleName.length < 8">{{ item.titleName }}</div>
              <div v-else>{{ item.titleName.slice(0, 8) }}...</div>

              <div>
                分类:{{
                  item.categoryName === 0
                    ? "宠物"
                    : item.categoryName === 1
                    ? "生活"
                    : "其他"
                }}
              </div>
            </div>
            <div class="post-bottom">
              <!-- <el-button text class="button">{{ item.content }}</el-button> -->
              <!-- <span>{{ item.content }}</span> -->
              <div class="post-bottom-left-image">
                <el-image
                  :src="item.iconUrl"
                  fit="cover"
                  style="width: 30px; height: 30px"
                ></el-image>
                <span v-if="item.nickName.length < 8">{{ item.nickName }}</span>
                <span v-else>{{ item.nickName.slice(0, 8) }}...</span>
              </div>

              <div>
                <div>点赞数：{{ item.likeNumber }}</div>
                <div>评论数：{{ item.commentNumber }}</div>
              </div>
            </div>
          </el-card></el-col
        >
      </el-row>
      <div
        style="width: 100%; text-align: center; font-size: 20px"
        v-if="emtryData"
      >
        没有更多数据
      </div>
    </div>
  </div>

  <CheckDialog ref="checkDialogRef" />
  <AddDialog ref="addDialogRef" @getDataList="getDataList" />
</template>
<script setup lang="ts">
import { searchPost } from "@/api/owner";
import { reactive, onMounted, ref } from "vue";
import CheckDialog from "./check-dialog.vue";
import AddDialog from "./add-dialog.vue";
const form = reactive({
  titleName: "",
  categoryName: "",
});
const postList = ref<any>([]);
const page = ref(1);
const pageSize = ref(10);

const checkDialogRef = ref();
const addDialogRef = ref();

const handleAddPost = () => {
  addDialogRef.value.showDialog();
};

const handleCheckPost = (id: number | string) => {
  checkDialogRef.value.showDialog(id);
};
const emtryData = ref(false);
const loading = ref<boolean>(false);
const handleQuery = () => {
  page.value = 1;
  getPostData();
};
const getDataList = async () => {
  page.value = 1;
  await searchPost(
    form.categoryName,
    page.value,
    pageSize.value,
    form.titleName
  ).then((res: any) => {
    if (page.value === 1) {
      page.value++;
      postList.value = res.data;
      return;
    }
    if (res.data) {
      page.value++;
      res.data.forEach((item: any) => {
        postList.value.push(item);
      });
    } else {
      emtryData.value = true;
    }
  });
};
const getPostData = async () => {
  loading.value = true;
  await searchPost(
    form.categoryName,
    page.value,
    pageSize.value,
    form.titleName
  ).then((res: any) => {
    if (page.value === 1) {
      page.value++;
      postList.value = res.data;
      return;
    }
    if (res.data) {
      page.value++;
      res.data.forEach((item: any) => {
        postList.value.push(item);
      });
    } else {
      emtryData.value = true;
    }
  });
  loading.value = false;
};
onMounted(() => {
  getPostData();
});
</script>
<style scoped lang="less">
.post_card {
  margin: 10px auto;
  // padding: 10px;
  width: 98%;
}
.scoll_data {
  overflow: auto;
  height: 540px;
  &::-webkit-scrollbar {
    // display: none;
    width: 0px;
    border-radius: 10px;
  }

  /* 修改滚动条轨道颜色 */
  &::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, 0);
  }

  /* 修改滚动条滑块颜色 */
  &::-webkit-scrollbar-thumb {
    background-color: #999;
    border-radius: 10px;
  }
}

.post-bottom {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  .post-bottom-left-image {
    display: flex;
    align-items: center;
    width: 35%;
    justify-content: space-around;
    text-align: center;
  }
}
.post-middle {
  padding: 14px;
  display: flex;
  justify-content: space-between;
}
</style>
